<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Centerpiece Demo</title>
	<script type="text/javascript" language="javascript" src="javascript/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" language="javascript" src="javascript/centerpiece.js"></script>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<style type="text/css">
		body { font-family: Verdana, sans-serif; margin: 20px; }
		h1 { font-size: 24px; font-weight: 400; }
		:focus { outline: 0; }
		#centerpiece { width: 600px; margin: 20px 20px 20px 0; overflow: hidden; border: 2px solid #000; }
		
		#centerpiece #stories { width: 400px; height: 299px; overflow: hidden; float: left; background: #000; }
		#centerpiece .story { position: absolute; width: 400px; height: 299px; overflow: hidden; }
		#centerpiece .story .text { width: 400px; position: absolute; left: 0; bottom: -1px; background: url("images/background_transparent.png") 0 0 repeat; overflow: hidden; }
		#centerpiece .story .text h2 { color: #FFF; font-size: 18px; line-height: 18px; font-weight: 800; margin: 20px 20px 0 20px; }
		#centerpiece .story .text p { color: #FFF; font-size: 11px; line-height: 17px; margin: 10px 20px 20px 20px; }
		#centerpiece .story .text a { color: #FFF; }

		#centerpiece .controls { width: 200px; overflow: hidden; float: right; background: #222; }
		#centerpiece .controls ul { list-style: none; padding: 0; margin: 0; }
		#centerpiece .controls li { float: left; clear: both; margin: 0; padding: 0; } 
		#centerpiece .controls a { display: block; width: 200px; padding: 10px 0; overflow: hidden; border-bottom: 1px solid #000; text-decoration: none; }
		#centerpiece .controls a:hover { background: #444; }
		#centerpiece .controls .thumbnail { display: block; width: 74px; overflow: hidden; float: left; }
		#centerpiece .controls .thumbnail img { border: 2px solid #EEE; margin: 0 10px;}
		#centerpiece .controls .text { display: block; font-size: 11px; font-weight: 800; color: #EEE; width: 116px; overflow: hidden; float: left; padding: 0 0 10px 0; }
		#centerpiece .controls .last a { border: 0; }
		#centerpiece .controls .active a { background: #666; }
		#centerpiece .controls .active a .text { color: #EEE; }
	</style>
</head>
	<body>

	<h1>Centerpiece Demo</h1>

	<div id="centerpiece">
		<div id="stories">
			<div class="story">
				<div class="text">
					<h2>Feature #1</h2>
					<p>Some text... <a href="#">Some link...</a></p>
				</div>
				<img src="images/0.jpg" width="400" height="300" alt="" />
			</div>
			<div class="story">
				<div class="text">
					<h2>Feature #2</h2>
					<p>Some text... <a href="#">Some link...</a></p>
				</div>
				<img src="images/1.jpg" width="400" height="300" alt="" />
			</div>
			<div class="story">
				<div class="text">
					<h2>Feature #3</h2>
					<p>Some text... <a href="#">Some link...</a></p>
				</div>
				<img src="images/2.jpg" width="400" height="300" alt="" />
			</div>
			<div class="story">
				<div class="text">
					<h2>Feature #4</h2>
					<p>Some text... <a href="#">Some link...</a></p>
				</div>
				<img src="images/3.jpg" width="400" height="300" alt="" />
			</div>
		</div>
		<div class="controls">
			<ul>
				<li><a href="#">
					<span class="thumbnail"><img src="images/0-thumbnail.jpg" width="50" height="50" alt="" /></span>
					<span class="text">Feature #1</span>
				</a></li>
				<li><a href="#">
					<span class="thumbnail"><img src="images/1-thumbnail.jpg" width="50" height="50" alt="" /></span>
					<span class="text">Feature #2</span>
				</a></li>
				<li><a href="#">
					<span class="thumbnail"><img src="images/2-thumbnail.jpg" width="50" height="50" alt="" /></span>
					<span class="text">Feature #3</span>
				</a></li>
				<li class="last"><a href="#">
					<span class="thumbnail"><img src="images/3-thumbnail.jpg" width="50" height="50" alt="" /></span>
					<span class="text">Feature #4</span>
				</a></li>
			</ul>
		</div>
	</div>

	</body>
</html>